<template>
    <div class="member">
      <jm-head ref="head"></jm-head>
        <van-swipe class="my-swipe" :loop="false" indicator-color="#edb14f" :initial-swipe="$store.state.userInfo.grade">
          <van-swipe-item v-for="(item,index) in grade" :key = "index">
            <div class="member_header">
                <div class="wrapper">
                     <div class="slide_content box">
                         <h2>{{item.title}}
                            <span v-if="item.level==$store.state.userInfo.grade" class="iconfont" style="color: #edb14f;">&#xe79d;</span>
                            <span v-else class="iconfont">&#xe79d;</span>
                         </h2>
                         <p class="tip many_line line_two">{{item.describe}}</p>
                         <p class="isjie box" v-if="item.level<=$store.state.userInfo.grade"><span class="iconfont">&#xe75b;</span>已解锁该会员等级</p>
                         <p class="isjie box" v-else><span class="iconfont">&#xe75b;</span>未解锁该会员等级</p>
                     </div>
                </div>

            </div>
            <div class="member_content box">
                <h3><span class="iconfont fl">&#xe78d;</span>会员升级要求<span class="fr"><i></i></span></h3>
                <ul>
                    <!-- <li class="box">
                        <h4>成为{{item.title}}
                            <span class="fr" v-if="recommend[index].recommend[1].haveNum >= recommend[index].recommend[1].num">已满足条件</span>
                            <span class="fr" v-else>未满足条件</span>
                        </h4>
                        <van-progress v-if="recommend[index].recommend[1].num != 0 && recommend[index].recommend[1].haveNum < recommend[index].recommend[1].num" color="#edb14f" :show-pivot="false" :percentage="recommend[index].recommend[1].haveNum/recommend[index].recommend[1].num * 100" />
                        <van-progress v-else olor="#edb14f" :show-pivot="false" :percentage="100" />
                        <div class="tip_bottom">
                            <span style="margin-top: 5px" class="fl">{{recommend[index].recommend[1].text}}</span>
                            <span class="fr"><i>{{recommend[index].recommend[1].haveNum}}</i>/{{recommend[index].recommend[1].num}}
                            </span>
                        </div>
                    </li>
                    <li class="box">
                        <h4>成为{{item.title}}
                            <span class="fr" v-if="recommend[index].recommend[0].haveNum >= recommend[index].recommend[0].num">已满足条件</span>
                            <span class="fr" v-else>未满足条件</span>
                        </h4>
                        <van-progress v-if="recommend[index].recommend[0].num != 0" color="#edb14f" :show-pivot="false" :percentage="recommend[index].recommend[0].haveNum/recommend[index].recommend[0].num * 100" />
                        <van-progress v-else olor="#edb14f" :show-pivot="false" :percentage="100" />
                        <div class="tip_bottom">
                            <span style="margin-top: 5px" class="fl">{{recommend[index].recommend[0].text}}</span>
                            <span class="fr"><i>{{recommend[index].recommend[0].haveNum}}</i>/{{recommend[index].recommend[0].num}}
                            </span>
                        </div>
                    </li> -->
                    <li class="box" v-for="(v,k) in recommend[index].recommend" :key = "k" v-if="$store.state.userInfo.is_partner != 1">
                        <h4>成为{{item.title}}
                            <span class="fr" v-if="v.haveNum >= v.num">已满足条件</span>
                            <span class="fr" v-else>未满足条件</span>
                        </h4>
                        <van-progress v-if="v.num != 0" color="#edb14f" :show-pivot="false" :percentage="v.haveNum/v.num * 100" />
                        <van-progress v-else olor="#edb14f" :show-pivot="false" :percentage="100" />
                        <div class="tip_bottom">
                            <span style="margin-top: 5px" class="fl">{{v.text}}</span>
                            <span class="fr"><i>{{v.haveNum}}</i>/{{v.num}}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
          </van-swipe-item>
        </van-swipe>

        <!--
        <div class="hot_content box">
            <h3><span>———— ●</span>热门推荐<span>● ————</span></h3>
        </div>
        -->

    </div>
</template>

<script>
    import { gradePage } from "@/api/user"
    import JmHead from '../head/head'
    import Vue from 'vue'
    import { Swipe, SwipeItem  } from 'vant';

    Vue.use(Swipe).use(SwipeItem)
    export default {
        name: 'member',
        components: {
                JmHead
            },
        data(){
            return {
                grade: [],
                recommend: [],
            }
        },
        methods: {
            gradePage() {
                gradePage({}).then(res => {
                    this.grade = res.data.gradeArr
                    this.recommend = res.data.recommend
                })
            }
        },
        activated(){
            this.gradePage()
            this.$refs.head.setNavBarUrl()
        },
    }
</script>
<style lang="stylus" scoped>
    .wrapper >>> .swiper-slide
        width 95% !important
    .member
        background #f5f5f5
        height 100vh
        .member_header
            width 100%
            overflow hidden
            background #000
            h1
                width 100%
                overflow hidden
                color #fff
                line-height 1rem
                font-size .4rem
                text-align center
            .wrapper
                    width 100%
                    overflow hidden
                    margin .2rem 0
                    .slide_content
                        margin-left .2rem
                        margin-right .2rem
                        overflow hidden
                        border-radius 4px
                        background #98a9b9
                        height 0
                        padding .3rem .3rem 35% .3rem
                        color #fff
                        position relative
                        h2
                            line-height .6rem
                            font-size .36rem
                            letter-spacing 2px
                            span
                                float  right
                                font-size  .6rem
                                color #fff
                        .tip
                            line-height .4rem
                            font-size .26rem
                            margin-top .2rem

                        .isjie
                            line-height .4rem
                            font-size .24rem
                            position absolute
                            bottom .2rem
                            left .3rem
                            span
                                float  left
                                font-size  .4rem
                                color #fff
                                margin-right .1rem
                    .slide_content_gold
                        background #779ade
        .member_content
            width 100%
            background #fff
            padding .3rem
            padding-bottom .6rem
            i
                list-style none
                color #edb14f
            h3
                width 100%
                overflow hidden
                line-height .5rem
                font-size .30rem
                color #000
                font-weight 600
                span
                    font-weight  normal
                .fl
                    font-size .5rem
                    color #edb14f
                    margin-right .2rem
                .fr
                    font-weight normal
                    color #aca9a9
            ul
                width 100%
                overflow hidden
                li
                    width 100%
                    overflow hidden
                    background #f9f9f9
                    border-radius 4px
                    padding .3rem
                    margin-top .3rem
                    position relative
                    &::before
                        content ''
                        height .5rem
                        border-right 3px solid #edb14f
                        position absolute
                        top .3rem
                        left 0
                    h4
                        width 100%
                        overflow hidden
                        line-height .5rem
                        font-size .28rem
                        color #000
                        font-weight 600

                        .fr
                            font-weight normal
                            color #aca9a9
                    .tip_bottom
                        width 100%
                        overflow hidden
                        color #aca9a9
                        font-size .24rem
        .hot_content
            width 100%
            background #fff
            padding .3rem
            margin-top .3rem
            h3
                width 100%
                overflow hidden
                line-height .5rem
                font-size .30rem
                color #000
                font-weight 600
                text-align center
                span
                    margin 0 .4rem
                    color #aca9a9


</style>
